<template>
  <CommonPage :show-header="false">
    <article class="margin-top-sm flex  flex-column flex-sub">
      <section style="display: flex;justify-content: space-between;margin-bottom: 10px">
        <div style="display: flex">
          <AppointmentStatusSelect v-model:value="andParams.status" @on-select="search"></AppointmentStatusSelect>
          <AppointmentTypeSelect v-model:value="andParams.type" @on-select="search"></AppointmentTypeSelect>
          <SortSelect3 v-model:value="sortKey" @on-select="search"></SortSelect3>
        </div>
        <div>
          <SearchInput v-model:value="searchKey" @change="search" placeholder="ID/患者/医护" :loading="loading"></SearchInput>
        </div>
      </section>
      <section  style="overflow:hidden" class="flex flex-sub radius-lg bg-white  padding-tb-sm">
          <CurdTable ref="tableRef"
                     :get-data="api.appointment.list"
                     :columns="columns"
                     :and-params="andParams"
                     :or-params="orParams"
                     :order-params="orderParams">
          </CurdTable>
      </section>
    </article>
  </CommonPage>
</template>

<script setup lang="ts">
import CommonPage from "@/components/page/CommonPage.vue";
import CurdTable from "@/components/common/table/CurdTable.vue";
import {h, onMounted, ref} from "vue";
import api from '@/api'
import SortSelect3 from "@/components/example/select/SortSelect3.vue";
import {NButton, NEllipsis, NTag, NText} from "naive-ui";
import {getAppointmentStatus, getAppointmentStatusColor, getAppointmentTagType, getAppointmentType} from "@/utils";
import myMoment from "@/utils/common/myMoment";
import AppointmentStatusSelect from "@/components/example/select/AppointmentStatusSelect.vue";
import AppointmentTypeSelect from "@/components/example/select/AppointmentTypeSelect.vue";
import router from "@/router";
import SearchInput from "@/components/common/input/SearchInput.vue";




/** QueryBar筛选参数（可选） */
const orParams = ref({
  id: '',
  patientName: '',
  nurseName: '',
})
/** 补充参数（可选） */
const andParams = ref({
  status:'',
  type:'',
})
/** 排序参数(可选）*/
const orderParams = ref({
  createTime: '',
})
const loading = ref()
const tableRef = ref()
const searchKey = ref('')
const sortKey = ref('2')

const columns = ref([
  {title: 'ID', key: 'id', width: 3, ellipsis: {tooltip: true}},
  {
    title: '类型', key: 'type', width: 4, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NTag, {
        style: {fontSize: '14px'},
        type: getAppointmentTagType(row.type)
      }, {default: () => getAppointmentType(row.type)})
    }
  },
  {
    title: '预约时间', key: 'createTime', width: 8, ellipsis: {tooltip: true}, align: 'center',
    render(row: { [x: string]: any; }) {
      return h("div", {}, [
        h("div", {style: {fontSize: '14px'}}, [h(NEllipsis, {}, {default: () => myMoment(row?.appointmentTime.split(",")[0]).format("MMMDo")})]),
        h(NText, {depth: '3'}, {default: () => myMoment(row?.appointmentTime.split(",")[0]).format("H:mm") + '-' + myMoment(row?.appointmentTime.split(",")[1]).format("H:mm")}),
      ])
    }
  },
  {
    title: '患者', key: 'patientName', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.patientName})
    }
  },
  {
    title: '医护', key: 'nurseName', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.nurseName})
    }
  },
  {
    title: '状态', key: 'status', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {
        style: {
          fontSize: '14px',
          color: getAppointmentStatusColor(row.status)
        }
      }, {default: () => getAppointmentStatus(row.status)})
    }
  },
  {
    title: '创建时间', key: 'createTime', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: { [x: string]: any; }) {
      return h("div", {}, [
        h("div", {style: {fontSize: '14px'}}, [h(NEllipsis, {}, {default: () => myMoment(row?.createTime).format("MMMDo H:mm")})]),
        h(NText, {depth: '3'}, {default: () => myMoment(row?.createTime).startOf('minute').fromNow()}),
      ])
    }
  },
  {
    title: '结果', key: 'treatId', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}},
          {default: () => !row.treatId&&'-' ||
                h(NButton, {style: {fontSize: '15px'},secondary :true,round:true,type:'primary',onClick:()=>{handleResult(row)}}, {default: () => '结果'})})
    }
  },

])

onMounted(() => {
  search()
})

const search = async () => {
  loading.value = true
  Object.keys(orParams.value).forEach((key: any) => {
    //@ts-ignore
      orParams.value[key] = `%${searchKey.value}%`
  })
  if (sortKey.value === '1') {
    orderParams.value.createTime = '1'
  } else if (sortKey.value === '2') {
    orderParams.value.createTime = '2'
  } else {
    orderParams.value.createTime = ''
  }
  await tableRef.value.handleSearch()
  loading.value = false
}

const handleResult=(row:any)=>{
  router.push({
    path:'/appointment/result',
    query:{
      appointmentInfo:encodeURIComponent(JSON.stringify(row))
    }
  })
}


</script>

<style scoped>

</style>